import React, {Component} from 'react';
import './App.css'
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";

class App extends Component {
  state = {
    todos: [
      {id: '1001', title: '吃饭', done: false},
      {id: '2002', title: '睡觉', done: true},
      {id: '3003', title: '打豆豆', done: false},
    ]
  }

  addTodo = todo => {
    const {todos} = this.state
    this.setState({todos: [todo, ...todos]})
  }

  deleteTodo = id => {
    const {todos} = this.state
    this.setState({todos: todos.filter(todo => todo.id !== id)})
  }

  checkTodo = (id) => {
    const {todos} = this.state
    this.setState({
      todos: todos.map(todo =>
        todo.id === id ? {...todo, done: !todo.done} : todo)
    })
  }

  checkAllTodo = (done) => {
    console.log('@ checkAllTodo ', done)
    const {todos} = this.state
    this.setState({todos: todos.map(todo => ({...todo, done}))})
  }

  clearAllTodo = () => {
    console.log('@ clearAllTodo')
    const {todos} = this.state
    this.setState({todos: todos.filter(todo => !todo.done)})
  }

  render() {
    const {todos} = this.state
    const {
      addTodo, deleteTodo, checkTodo,
      checkAllTodo, clearAllTodo
    } = this
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={addTodo}/>
          <List todos={todos}
                checkTodo={checkTodo}
                deleteTodo={deleteTodo}/>
          <Footer todos={todos}
                  checkAllTodo={checkAllTodo}
                  clearAllTodo={clearAllTodo}/>
        </div>
      </div>
    );
  }
}

export default App;